<template>
	<div class="module-name pt10 pl10 pr10 ">
		<avue-crud v-model="dialogForm" :data="data" :option="option" :page.sync="page" :search.sync="searchForm"
		           :table-loading="loading"
		           @on-load="onLoad"
		           @search-change="handleSearchChange"
		           @row-save="handleSave"
		           @row-update="handleUpdate"
		           @row-del="handleDel">
			<template slot="status" slot-scope="{row}">
				<el-tag v-show="row.status === 1">正常</el-tag>
				<el-tag v-show=" row.status === 0" type="danger">禁用</el-tag>
			</template>
			<template slot="userRole" slot-scope="{row}">
				<el-tag v-for="(item,index) in row.userRole" :key="index" style="margin-right: 10px">{{
						item.role.name
					}}
				</el-tag>
			</template>
			<template slot="parentUser" slot-scope="{row}">
				<el-tag style="margin-right: 10px">{{ row.parentUser?.user.username }}</el-tag>
			</template>
		</avue-crud>
	</div>
</template>
<script>
import page from "@/mixins/page";
import {dic} from "@/config";

export default {
	name: "proxyUserList",
	mixins: [page],
	data() {
		return {
			//分页参数
			searchForm: {},
			urls: {
				0: 'user',
				1: 'findChildAllPage',
			},

			data: [],
			option: {
				...window.avueCrud,
				addBtn: true,
				editBtn: true,
				viewBtn: true,
				delBtn: false,
				column: [
					{
						label: '用户id',
						prop: 'subuser_id',
						search: true,
						display: false
					},
					{
						label: 'username',
						prop: 'subuser_username',
						search: true,
						rules: [{
							required: true,
							message: "请输入username",
							trigger: "blur"
						}]
					},
					{
						label: 'password',
						prop: 'subuser_password',
						search: true,
						hide: true,
						addDisplay: true,
						editDisplay: false,
						rules: [{
							required: true,
							message: "请输入password",
							trigger: "blur"
						}]
					},
					{
						label: '余额',
						prop: 'subuser_balance',
					},
					{
						label: '电话',
						prop: 'subuser_photo',
					},
					{
						label: '头像',
						prop: 'subuser_avatar',
						type: 'img',
						display: false,
					},
					{
						label: '状态',
						prop: 'subuser_status',
						search: true,
						type: 'select',
						...dic,
						dicQuery: {
							code: 'status',
						}
					},
					{
						label: '创建时间',
						prop: 'subuser_createAt',
						display: false,
					},
					{
						label: '修改时间',
						prop: 'subuser_updateAt',
						display: false,
					},

				],
			},
			dialogForm: {},
			currentRow: {},
			popup: {
				roleShow: false,
				childShow: false
			}
		};
	},
	methods: {
		async handleUpdate(row, index, done, disabled) {
			try {
				const {code} = await this.$api.user.update(row.subuser_id, {
					password: row.subuser_password,
					username: row.subuser_username,
					photo: row.subuser_photo,
					status: row.subuser_status,
					balance: row.subuser_balance,
				})
				if (code === 200) {
					this.$notify({
						message: '更改成功',
						type: 'success',
						duration: 2000,
					})
					this.getData(this.searchForm)
					done()
				}
			} catch (e) {
				disabled()
			}
		},

		async handleSave(row, done, disabled) {
			try {
				const {code, msg} = await this.$api.user.create({
					password: row.subuser_password,
					username: row.subuser_username,
					photo: row.subuser_photo,
					balance: row.subuser_balance,
				})
				if (code === 200) {
					this.getData(this.searchForm)
					this.$notify({
						message: msg || '创建成功',
						type: 'success',
						duration: 2000,
					})
				}
				done()
			} catch (e) {
				disabled()
			}
		},

		async handleDel(row) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					const {code} = await this.$api.user.remove(row.id)
					if (code === 200) {
						this.getData(this.searchForm)
						this.$notify({
							message: '删除成功',
							type: 'success',
							duration: 2000,
						})
					}
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		}
	}
};
</script>

<style lang="scss" scoped>
.module-name {
}
</style>
